import 'package:flutter/material.dart';
import 'package:flutter_devio/pages/home_page.dart';
import 'package:flutter_devio/pages/my_page.dart';
import 'package:flutter_devio/pages/search_page.dart';
import 'package:flutter_devio/pages/travel_page.dart';

class TabNavigator extends StatefulWidget {


//  @override
//  State<StatefulWidget> createState() {
//    // TODO: implement createState
//    return null;
//  }

  @override
  _TabNavigatorState createState() => _TabNavigatorState();


}

class _TabNavigatorState extends State<TabNavigator> {
  // 未选中情况下颜色
  final _defaultColor = Colors.grey;
  // 选中情况下颜色
  final _activeColor = Colors.blue;
  // 当前选中的页
  int _currentPage = 0;

  // 创建一个翻页的视图
  PageController _controller = PageController(
    initialPage: 0, // 初试页，从 0 开始
  );


  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(

      body: PageView( // 内容为翻页的视图
        controller: _controller, // 指定一个控制器
        children: <Widget>[
          HomePage(), // 首页
          SearchPage(), // 搜索
          TravelPage(), // 旅拍
          MyPage() // 我的
        ],
      ),
      bottomNavigationBar: BottomNavigationBar( // 底部导航栏，类似于 QQ 的底部
          currentIndex: _currentPage,
          onTap: (index) {
            // 设置点击底部菜单栏后，根据坐标显示页面
            _controller.jumpToPage(index);

            print('点击的值：$index');

            // 设置 _currentPage 的值
            setState(() { // 这个 setState 函数，表示更新值
              _currentPage = index;

            });

          },
          type: BottomNavigationBarType.fixed,
          items: [ // 底部导航栏，菜单集合
            BottomNavigationBarItem( // 创建一个首页的菜单
              // 未激活下的 item图标
              icon: Icon( // 设置一个 icon 图标
                Icons.home, // Icons 是封装的 Icon 控件
                color: _defaultColor,
              ),
              // 激活下的 item图标
              activeIcon: Icon( // 设置一个 icon 图标
                  Icons.home,
                  color: _activeColor,
              ),
              // 如果当前页为 1 ，就表示选中
              title: Text('首页', style: TextStyle(color: _currentPage != 0 ? _defaultColor : _activeColor))
            ),
            BottomNavigationBarItem(
              icon: Icon(
                Icons.search,
                color: _defaultColor,
              ),
              activeIcon: Icon(
                Icons.search,
                color: _defaultColor,
              ),
              title: Text('搜索', style: TextStyle(color: _currentPage != 1 ? _defaultColor : _activeColor))
            ),
            BottomNavigationBarItem(
                icon: Icon(
                  Icons.camera_alt,
                  color: _defaultColor,
                ),
                activeIcon: Icon(
                  Icons.camera_alt,
                  color: _defaultColor,
                ),
                title: Text('旅拍', style: TextStyle(color: _currentPage != 2 ? _defaultColor : _activeColor))
            ),
            BottomNavigationBarItem(
                icon: Icon(
                  Icons.account_circle,
                  color: _defaultColor,
                ),
                activeIcon: Icon(
                  Icons.account_circle,
                  color: _defaultColor,
                ),
                title: Text('我的', style: TextStyle(color: _currentPage != 3 ? _defaultColor : _activeColor))
            )
          ]
      ),

    );
  }

}